<template>
  <div class="callCenterInfos">
    <TitleName
      class="title mb-20px"
      icon="i-carbon-bookmark-filled"
      title="会员费发票"
    ></TitleName>
    <el-table :data="tableList" border>
      <el-table-column
        label="关联订单"
        prop="contractOrderNumber"
        width="180"
      />
      <el-table-column label="开票日期" prop="invoiceDate" width="110">
      </el-table-column>
      <el-table-column label="发票号码" prop="number" width="180" />
      <el-table-column label="产品" prop="content" />invoice_manage_type
      <el-table-column label="票据类型" prop="type" width="180">
        <template #default="scoped">
          <span>{{
            find(invoice_manage_type, v => {
              return v.value == scoped.row.type
            })
              ? find(invoice_manage_type, v => {
                  return v.value == scoped.row.type
                }).label
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="开票金额" prop="price" width="120" />
      <!--      <el-table-column label="会员费起始时间" prop="statusName" width="180" />-->
      <!--      <el-table-column label="会员费截止时间" prop="statusName" width="180" />-->
      <el-table-column
        :width="paramData.isDetail ? 120 : 220"
        fixed="right"
        label="操作"
      >
        <template #default="scoped">
          <el-button
            v-if="scoped.row.pdfUrl"
            icon="download"
            plain
            size="small"
            type="primary"
            @click="download(scoped.row)"
          >
            发票下载</el-button
          >
          <el-button
            v-if="!paramData.isDetail && scoped.row.pdfUrl"
            icon="promotion"
            plain
            size="small"
            type="success"
            @click="sendMail(scoped.row)"
          >
            发送邮件</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:limit="searchFrom.pageSize"
      v-model:page="searchFrom.pageNum"
      :total="total"
      @pagination="getList"
    />
    <TitleName
      class="title mb-20px mt-20px"
      icon="i-carbon-bookmark-filled"
      title="CRM收费列表"
    ></TitleName>
    <el-table :data="tablePastList" border>
      <el-table-column label="到期日期" prop="EndDate" width="180" />
      <el-table-column label="起始日期" prop="StartDate" width="180" />
      <el-table-column label="发票号码" prop="startValue" width="130" />
      <el-table-column label="产品名称" prop="productName" />
      <el-table-column label="分机号" prop="billingMachineNo" width="100" />
      <el-table-column label="收费人" prop="operName" width="100" />
      <el-table-column label="审核时间" prop="audiTDate" width="180" />
      <el-table-column label="收费金额" prop="invoiceAmount" width="120" />
      <el-table-column label="状态" prop="auditState" width="100" />
    </el-table>
    <pagination
      v-show="pastTotal > 0"
      v-model:limit="pastSearchFrom.pageSize"
      v-model:page="pastSearchFrom.pageNum"
      :total="pastTotal"
      @pagination="getPastList"
    />
    <TitleName
      class="title mt-20px mb-20px"
      icon="i-carbon-bookmark-filled"
      title="邮件历史记录"
    ></TitleName>
    <el-table :data="mailTableList" border>
      <el-table-column label="发送时间" prop="createTime" width="220" />
      <el-table-column label="发送人" prop="userName" width="100">
      </el-table-column>
      <el-table-column label="客户邮箱" prop="email" width="180" />
      <el-table-column
        :show-overflow-tooltip="true"
        label="标题"
        prop="title"
        width="180"
      />
      <el-table-column label="邮件主题" prop="subject" />
      <el-table-column label="邮件内容" prop="content" />
    </el-table>
    <pagination
      v-show="mailTotal > 0"
      v-model:limit="mailSearchFrom.pageSize"
      v-model:page="mailSearchFrom.pageNum"
      :total="mailTotal"
      @pagination="mailGetList"
    />
    <!--      发送邮件-->
    <el-dialog v-model="mailVisible" title="设置邮箱" width="500px">
      <el-form
        ref="mailformRef"
        :label-position="'right'"
        :model="mailform"
        :rules="formRules"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="邮箱主题" prop="subject">
          <el-input
            v-model="mailform.subject"
            autosize
            maxlength="100"
            placeholder="请输入邮箱主题"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="mailform.email"
            maxlength="50"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer text-right">
          <el-button @click="mailVisible = false">取 消</el-button>
          <el-button
            :loading="sendLoading"
            type="primary"
            @click="sendMail({ sendMailType: 'send' })"
            >发送</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script name="PRSinvoiceList" setup>
import { getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
import useUserStore from '@/store/modules/user'
import useCommonStore from '@/store/modules/common'
import {
  callRecordSave,
  erpInvoiceRecord,
  mailList,
  sendmail
} from '@/api/callCenter'
import { listInvoice } from '@/api/invoiceManage/invoice'
import { business_customer_type } from '@/hooks/dict/business'
import { find } from 'lodash'
const userStore = useUserStore()
const commonStore = useCommonStore()
const { invoice_manage_type } = proxy.useDict('invoice_manage_type')
// 接受父级传递的参数
const props = defineProps({
  paramData: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  }
})

const data = reactive({
  searchFrom: {
    pageSize: 10,
    pageNum: 1
  },
  mailVisible: false,
  mailform: {
    subject: '',
    email: ''
  },
  total: 0,
  tableList: [],
  mailSearchFrom: {
    pageSize: 10,
    pageNum: 1
  },
  mailTotal: 0,
  mailTableList: [],
  formRules: {
    subject: [
      { required: true, message: '请输入邮箱主题', trigger: ['blur', 'change'] }
    ],
    email: [
      { required: true, message: '请输入邮箱', trigger: ['blur', 'change'] },
      {
        type: 'email',
        message: '请输入正确的邮箱',
        trigger: ['blur', 'change']
      }
    ]
  },
  //旧erp
  tablePastList: [],
  pastSearchFrom: {
    pageSize: 10,
    pageNum: 1
  },
  pastTotal: 0
})
const {
  searchFrom,
  mailVisible,
  mailform,
  total,
  tableList,
  mailSearchFrom,
  mailTotal,
  mailTableList,
  formRules,
  tablePastList,
  pastSearchFrom,
  pastTotal
} = toRefs(data)
function getList() {
  listInvoice({
    customerId: props.paramData.customerId,
    pageSize: searchFrom.value.pageSize,
    pageNum: searchFrom.value.pageNum,
    businessTypeArr: ['云财税软件运维费', '云财税软件']
  }).then(res => {
    total.value = res.total
    tableList.value = res.rows
  })
}
// 发票下载
const download = rows => {
  window.open(rows.pdfUrl, '_blank')
}
const sendLoading = ref(false)
//发送邮箱
const sendMail = row => {
  console.log(row, mailform.value, '1mailform.value.title--')
  if (row.sendMailType == 'send') {
    console.log(row, mailform.value, 'mailform.value.title--')
    // 发送
    proxy.$refs['mailformRef'].validate(valid => {
      if (valid) {
        sendLoading.value = true
        sendmail(mailform.value)
          .then(res => {
            proxy.$modal.msgSuccess('发送成功')
            mailGetList()
            mailVisible.value = false
          })
          .finally(e => {
            sendLoading.value = false
          })
      } else {
        console.log('error submit!!')
        return false
      }
    })
  } else {
    //弹出框显示
    mailVisible.value = true
    mailform.value.email = ''
    mailform.value.subject = ''
    proxy.$nextTick(() => {
      proxy.$refs['mailformRef'].resetFields()
    })
    mailform.value.title = row.contractOrderNumber
    mailform.value.businessId = props.paramData.customerId
    mailform.value.content = row.pdfUrl
  }
}
//邮件历史记录
function mailGetList() {
  mailList({
    customerTaxcode: props.paramData.customerTaxcode,
    businessId: props.paramData.customerId,
    pageSize: mailSearchFrom.value.pageSize,
    pageNum: mailSearchFrom.value.pageNum
  }).then(res => {
    mailTotal.value = res.total
    mailTableList.value = res.rows
  })
}
// 旧erp 会员
function getPastList() {
  erpInvoiceRecord({
    customerTaxcode: props.paramData.customerTaxcode,
    businessId: props.paramData.customerId,
    pageSize: pastSearchFrom.value.pageSize,
    pageNum: pastSearchFrom.value.pageNum
  }).then(res => {
    pastTotal.value = res.total
    tablePastList.value = res.rows
  })
}
watch(
  () => props.paramData,
  val => {
    if (JSON.stringify(val) != '{}') {
      console.log('设备接收参数：', val)
      getList()
      mailGetList()
      getPastList()
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<style lang="scss" scoped></style>
